import React from 'react';
import { Form, Button, Input, Layout, Card, Divider, notification, Modal } from 'antd';
import { findMeetingByInviteCode, joinMeetingByInviteCode } from '../api/meeting';

const FormItem = Form.Item;

class JoinMeetingForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      findMeetingByInviteCode(fieldsValue)
      .then(res => {
        let { data } = res
        if (data.code === 1) {
          notification.error({
            message: data.msg
          })
        } else if (data.code === 0) {
          // console.log(data.data)
          let meeting = data.data
          meeting.inviteCode = fieldsValue.inviteCode
          this.props.setCurrent(meeting)
        }
      })
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit} style={{
        maxWidth: '800px',
        margin: 'auto'
      }}>
        <FormItem
          {...formItemLayout}
          label="会议邀请码"
        >
          {getFieldDecorator('inviteCode', {rules: [
            { required: true },
          ]})(
            <Input
              placeholder="请输入会议邀请码"
              type="text"
            />
          )}
        </FormItem>
        <FormItem
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 8 },
          }}
        >
          <Button type="primary" htmlType="submit">加入</Button>
        </FormItem>
      </Form>
    );
  }

  componentDidMount = () => {
    if (this.props.code) {
      const { setFieldsValue } = this.props.form
      setFieldsValue({
        meetingCode: this.props.code
      })
    }
  }
}

const WrappedJoinMeetingForm = Form.create()(JoinMeetingForm);

function MeetingModal(props) {
  let { meeting } = props
  let visible = meeting !== null
  return (
    <div>
      <Modal
        title="您确定要加入本会议吗"
        visible={visible}
        onOk={props.handleOk}
        onCancel={props.handleCancel}
      >
        {visible ? <div>
          <p>会议主题: {meeting.theme}</p>
          <p>会议地点: {meeting.room}</p>
          <p>会议发起人: {meeting.originator}</p>
        </div> : ''}
      </Modal>
    </div>
  );
}

class JoinMeeting extends React.Component {
  state = { currentMeeting: null }

  render() {
    return (
      <Layout>
        <Card>
          <Divider orientation="left">应邀参加会议</Divider>
          <WrappedJoinMeetingForm {...this.props} 
            setCurrent={(meeting) => {
              this.setState({
                currentMeeting: meeting
              })
            }}
          />
          <MeetingModal 
            meeting={this.state.currentMeeting}
            handleOk={() => {
              joinMeetingByInviteCode(this.state.currentMeeting.inviteCode)
              .then(res => {
                const { data } = res
                if(data.code === 1) {
                  notification.error({
                    message: data.msg
                  })
                } else if(data.code === 0) {
                  notification.success({
                    message: data.msg
                  })
                }
                this.setState({currentMeeting: null})
              }).catch(err => console.log(err))
            }}
            handleCancel={() => {
              this.setState({currentMeeting: null})
            }}
          />
        </Card>
      </Layout>
    )
  }
}

export default JoinMeeting
